<template>
  <div ref="pieChart07" class="pie-chart-07 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart07 = ref(null);
const echarts = inject("$echarts");

// 参数
let seriesData = [
  {
    name: "",
    data: [
      { value: 335, name: "1990年以前" },
      { value: 310, name: "1990-2000" },
      { value: 234, name: "2000-2010" },
      { value: 135, name: "2010-2020" },
      { value: 1048, name: "2020年之后" },
    ],
  },
];
let legendData = [];
seriesData.map((ele) => {
  ele.data.map((item) => {
    legendData.push(item.name);
  });
});

let text = seriesData[0].data[0].name;
let subtext = seriesData[0].data[0].value + "条";

const option = {
  compCode: "C202310015",
  title: {
    subtext: subtext,
    subtextStyle: {
      align: "center",
      fontSize: 30,
      color: "#fff",
    },
    text: text,
    textAlign: "center",
    x: "50%",
    y: "46%",
    textStyle: {
      fontSize: 14,
      color: "#fff",
    },
  },
  backgroundColor: "#010101",
  tooltip: {
    trigger: "item",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    top: "40%",
    right: "10%",
    data: legendData,
    textStyle: {
      color: "#fff",
    },
  },
  series: [
    {
      name: seriesData[0].name,
      type: "pie",
      radius: ["40%", "50%"],
      label: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        borderColor: "tranparent",
        borderWidth: 10,
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: seriesData[0].data,
    },
  ],
};

const animate = (chart) => {
  chart.on("mouseover", (params) => {
    let currName = params.name; //当前滑入选中的块 对应的值
    let op = option; //获取当前的option
    op.title.text = currName; //改变标题
    op.title.subtext = `${params.value}条`; //改变对应的值
    chart.setOption(op, true); //重新渲染
  });
  //滑出还原
  chart.on("mouseout", () => {
    let op = option;
    op.title.text = text; //title为原本标题
    op.title.subtext = subtext; //total为原来计算的总数
    chart.setOption(op, true);
  });
};

onMounted(() => {
  const chart = echarts.init(pieChart07.value);
  chart.setOption(option);
  animate(chart);
});
</script>
